<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>打字比赛</title>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <style type="text/css">
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        .container {
            margin: 0 auto;
            width: 80%;
            max-width: 800px;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            color: #333;
        }

        input[type="text"], input[type="email"], textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 16px;
            color: #333;
        }

        input[type="submit"] {
            background-color: #333;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        input[type="submit"]:hover {
            background-color: #555;
        }

        .timer {
            font-size: 48px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
        }

        .words {
            font-size: 24px;
            text-align: center;
            margin-bottom: 20px;
        }

        .input-group {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }

        .input-group input[type="text"] {
            margin-right: 10px;
        }

        .input-group input[type="submit"] {
            margin-left: 10px;
        }

        .result {
            font-size: 24px;
            text-align: center;
            margin-bottom: 20px;
        }

        .incorrect_char {
            color: red;
            text-decoration: underline;
        }

        .correct_char {
            color: blue;
        }
    </style>
</head>
<body>
<h1>打字比赛</h1>
<div class="container">
    <div id='text_time' class="timer">0s</div>
    <div id='output' class="words">Welcome to typing test,Click on the input box below </div>
    <form>
        <div class="input-group">
            <input type="text" id="input" name="input" placeholder="请输入上面的句子" oninput="change()">

        </div>
    </form>
    <div class="result"></div>
</div>
<script>
    var input_area = document.getElementById('input')
    var out_text = document.getElementById('output')
    var n = 0
    var first_true = 'true'
    var error_text = 0
    var true_text = 0
    var begin_time = 0
    var over_time = 5
    var text_time = document.getElementById('text_time')
    var all_rext = []
    //更新示例
    $.ajax({
        type: "POST",
        url: "/updata",
        success: function (message) {
            console.log(message)

            all_rext = message['text_content']
            over_time = message['over_time']
            console.log("提交成功");
        },
        error: function (message) {
            alert("提交失败");
        }
    });

    function updata_index_text() {
        out_text.innerText = ''
        all_rext[n].split('').forEach(char => {
            const charSpan = document.createElement('span')
            charSpan.innerText = char
            out_text.appendChild(charSpan)
        })
        n = n + 1
    }

    // 当输入框里面数据变化时判断是否正确
    function change() {
        curr_input = input_area.value;
        curr_input_array = curr_input.split('');
        quoteSpanArray = out_text.querySelectorAll('span');
        quoteSpanArray.forEach((char, index) => {
            if (typeof curr_input_array[index] == 'undefined') {
                char.classList.remove('incorrect_char');
                char.classList.remove('correct_char');
            } else if (curr_input_array[index] != char.innerText) {
                char.classList.remove('incorrect_char');
                char.classList.remove('correct_char');
                char.classList.add('correct_char');
            } else if (curr_input_array[index] == char.innerText) {
                char.classList.remove('incorrect_char');
                char.classList.remove('correct_char');
                char.classList.add('incorrect_char');
            } else {
                console.log('未知错误')
            }
        })

        if (curr_input_array.length == out_text.innerText.length) {
            count_error_true()
            // 更新示例
            updata_index_text()
            // 计算正确与错误字数
            input_area.value = ""
        }
    }

    // 输入框第一次获得焦点时更新第一行
    input_area.onfocus = function () {
        if (first_true == 'true') {
            // 更新第一行
            updata_index_text()
            console.log('1')
            first_true = 'false'

            begin_text()
        } else {
            console.log(first_true)
        }
    }

    function begin_text() {

        input_area.value = ''
        interval = setInterval(time_over, 1000);
    }

    // 定义时间循环，定义结束之后怎么办
    function time_over() {
        begin_time = begin_time + 1
        text_time.textContent = over_time - begin_time + 's'
        if (begin_time == over_time) {
            clearInterval(interval)
            count_error_true()
            console.log("true:" + true_text)
            console.log("error" + error_text)
            $.ajax({
                type: "POST",
                url: "/score",
                data: {
                    true: true_text,
                    error: error_text,
                    over_time: over_time
                },
                success: function (message) {
                    console.log(message)
                    alert("提交成功");
                },
                error: function (message) {
                    alert("提交失败");
                }
            });

            input_area.blur()

            reset_all()

        }
    }

    // 重置数据，重新开始
    function reset_all() {
        n = 0
        first_true = 'true'
        error_text = 0
        true_text = 0
        begin_time = 0
        input_area.value = ''
    }

    // 计算当前输入框正确与错误的字符
    function count_error_true() {
        all_span = out_text.querySelectorAll('span');
        all_span.forEach((char, index) => {
            if (char.classList[0] == 'correct_char') {
                error_text = error_text + 1
            } else if (char.classList[0] == 'incorrect_char') {
                true_text = true_text + 1
            }
        })
        console.log('--------')
    }

    function resert() {

    }


</script>

</body>

</html>
